import React from 'react';
import { Form, Input, Button, message, Modal, TreeSelect, Checkbox } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { connect } from 'umi';

const { confirm } = Modal;

class ContentEdit extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      datas: {},
      cascaderOption: [],
      contentEditor: '',
    };
  }
  formRef: any = React.createRef();
  componentDidMount() {
    const { Article } = this.props;
    this.fetchCategory();
    if (Article.current.id) {
      this.getData(Article.current.id);
    }
  }
  getData = (id: number) => {
    const { dispatch } = this.props;
    if (id > 0) {
      dispatch({
        type: 'Abp/get',
        payload: { id },
        control: 'Article',
      }).then(() => {
        var result = this.props.response.result;
        this.setState({ datas: result });
        this.formRef.current.setFieldsValue({ article: result });
      });
    }
  };
  fetchCategory = () => {
    this.props
      .dispatch({
        type: 'Category/getTreeData',
        payload: { layout: 'article' },
      })
      .then(() => {
        this.setState({ cascaderOption: this.props.Category.response.result });
      });
  };
  onFinish = (values: any) => {
    var act = 'Abp/create';
    if (values.article.id > 0) {
      act = 'Abp/update';
    }
    this.props
      .dispatch({
        type: act,
        payload: values.article,
        control: 'Article',
      })
      .then(() => {
        var resp = this.props.response;
        if (resp.success) {
          message.success('保存成功！');
          this.props.fetchDatas();
          this.props.switchModal(false);
        } else {
          message.error('保存错误，请联系管理员');
        }
      });
  };
  ResetForm = () => {
    var data = {
      id: 0,
    };
    this.setState({ datas: data });
    this.formRef.current.resetFields();
  };
  handleDel = () => {
    this.props
      .dispatch({
        type: 'CrudModel/delete',
        payload: { Id: this.state.datas.id }, //this.props.response.id
        control: 'Article',
      })
      .then(() => {
        var resp = this.props.response;
        if (resp.success) {
          message.success('删除成功！');
          this.props.fetchDatas();
          this.formRef.current.resetFields();
        } else {
          message.error('删除错误，请联系管理员！');
        }
      });
  };
  showConfirm = () => {
    var _this = this;
    confirm({
      title: '警告',
      icon: <ExclamationCircleOutlined />,
      content: '删除后将不可恢复，确定删除？',
      onOk() {
        _this.handleDel();
      },
      onCancel() {},
    });
  };
  render() {
    const layout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
    };
    const { datas } = this.state;
    return (
      <div>
        <Form {...layout} ref={this.formRef} onFinish={this.onFinish}>
          <div style={{ display: 'none' }}>
            <Form.Item label="id" name={['article', 'id']}>
              <Input />
            </Form.Item>
          </div>
          <Form.Item
            name={['article', 'categoryId']}
            label="分类"
            rules={[{ required: true, message: '请选择分类' }]}
          >
            <TreeSelect
              value={this.state.value}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              treeData={this.state.cascaderOption}
              placeholder="请选择"
              treeDefaultExpandAll
            />
          </Form.Item>
          <Form.Item
            name={['article', 'title']}
            label="标题"
            rules={[{ required: true, message: '请输入标题' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item name={['article', 'contents']} label="内容">
            <Input.TextArea />
          </Form.Item>
          <Form.Item name={['article', 'tags']} label="标签">
            <Input />
          </Form.Item>
          <Form.Item style={{ marginBottom: 0 }} wrapperCol={{ offset: 4 }}>
            <Input.Group compact>
              <Form.Item name={['article', 'isHot']} valuePropName="checked">
                <Checkbox>热</Checkbox>
              </Form.Item>
              <Form.Item name={['article', 'isRec']} valuePropName="checked">
                <Checkbox>推荐</Checkbox>
              </Form.Item>
              <Form.Item name={['article', 'isTop']} valuePropName="checked">
                <Checkbox>置顶</Checkbox>
              </Form.Item>
            </Input.Group>
          </Form.Item>
          <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 4 }}>
            <Button type="primary" htmlType="submit" loading={this.state.loading}>
              确定
            </Button>
            <Button onClick={this.ResetForm} style={{ marginLeft: 10 }}>
              重设
            </Button>
            <Button
              danger
              onClick={this.showConfirm}
              disabled={datas.id == 0 || !datas.id}
              style={{ marginLeft: 10 }}
            >
              删除
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}
export default connect(({ Abp, Category, Article }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: Abp.currentUser,
  Category,
  Article,
}))(ContentEdit);
